<template>
	<view class="out-box" v-if="state.userInfo" @click="closeBaord">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 信息卡 -->
		<view class="infoCard">
			<!-- 修改头像 -->
			<view class="userImg">
				<image @click="changeImage" :src="state.userImg"></image>
				<view class="changeIcon">
					<image src="../../static/changeImg.svg"></image>
				</view>
				<!-- 大标题 -->
				<view class="changeTitle">
					编辑个人信息
				</view>
				<!-- 返回按钮 -->
				<view class="backbtn" @click="backUser">
					<image src="../../static/back.svg"></image>
				</view>
			</view>
			<!-- 详细信息 -->
			<view class="detailInfo">
				<!-- 文字标题 -->
				<view class="title">
					个人信息
				</view>
				<!-- 信息卡 -->
				<view class="infoCard">
					<view class="card">
						<!-- 用户昵称 -->
						<view class="card-item">
							<view class="card-item-title">
								昵称
							</view>
							<view class="card-item-box boxinput">
								<input type="text" v-model="state.userName" @blur="setName">
							</view>
						</view>
						<!-- 用户性别及属地 -->
						<view class="card-item">
							<view class="card-item-title grids">
								<view class="sextitle">
									性别
								</view>
								<view class="citytitle">
									属地
								</view>
							</view>
							<view class="card-item-box gridboxs">
								<view class="boxsex" @click="setSex">
									<!-- 性别 -->
									<view class="sexstr">
										{{state.userInfo.sex==1?'男':'女'}}
									</view>
									<!-- 图标 -->
									<image src="../../static/xiajiantou.svg"></image>
								</view>
								<view class="boxarea" @click="changeCity">
									<!-- 性别 -->
									<view class="sexstr">
										{{state.userCity}}
									</view>
									<!-- 图标 -->
									<image src="../../static/xiajiantou.svg"></image>
								</view>
							</view>
						</view>
						<!-- 生日 -->
						<view class="card-item">
							<view class="card-item-title">
								生日
							</view>
							<view class="card-item-box boxbir" @click.stop="findSelect(1)">
								<!-- 年 -->
								<view class="datebox">
									<view class="dateboxdate">
										{{state.userBir[0]}}
										<view class="yearSelect" v-if="state.dateId == 1">
											<view class="yearSelectItem" @click.stop="setYear(item)"
												:class="state.yeadbl == item?'yearBgcolor':''"
												v-for="item in state.yearArr" :key="item">
												{{item}}
											</view>
										</view>
									</view>
									<view class="dateImg">
										<image src="../../static/xiajiantou.svg"></image>
									</view>
								</view>
								<!-- 月 -->
								<view class="datebox" @click.stop="findSelect(2)">
									<view class="dateboxdate">
										{{state.userBir[1]}}
										<view class="yearSelect" v-if="state.dateId == 2">
											<view class="yearSelectItem" @click.stop="setMonth(item)"
												:class="state.monthbl == item?'yearBgcolor':''"
												v-for="item in state.monthArr" :key="item">
												{{item}}
											</view>
										</view>
									</view>
									<view class="dateImg">
										<image src="../../static/xiajiantou.svg"></image>
									</view>
								</view>
								<!-- 日 -->
								<view class="datebox" @click.stop="findSelect(3)">
									<view class="dateboxdate">
										{{state.userBir[2]}}
										<view class="yearSelect" v-if="state.dateId == 3">
											<view class="yearSelectItem" @click.stop="setDay(item)"
												:class="state.daybl == item?'yearBgcolor':''"
												v-for="item in state.dayArr" :key="item">
												{{item}}
											</view>
										</view>
									</view>
									<view class="dateImg">
										<image src="../../static/xiajiantou.svg"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="submit">
						<!-- 取消按钮 -->
						<view class="subone" @click="reSet">
							取消
						</view>
						<!-- 保存按钮 -->
						<view class="subtwo" @click="changeInfo">
							保存
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 性别选择器 -->
		<u-picker :show="state.sexShow" :columns="state.sexData" @cancel="noSex" @confirm="yesSex"></u-picker>
		<!-- 属地选择器 -->
		<u-picker :show="state.areaShow" ref="upicker" :defaultIndex="state.defaindex" :columns="state.areaArr"
			@confirm="confirm" @change="changeHandler" @cancel="closearea"></u-picker>
		<!-- 成功提示框 -->
		<u-toast ref="utoast"></u-toast>
		<!-- 日期选择器 -->
		<u-datetime-picker title='选择日期' @confirm="setDate" @cancel="noDate" :show="state.dateShow"
			v-model="state.dateData" mode="date"></u-datetime-picker>
		<!-- 遮罩层 -->
		<view v-show="state.imghiden == true" class="imghiden"></view>
		<!-- 选择图库或者拍照弹出层 -->
		<view class="selectImgWay" :class="state.selectImage==true?'selectImgWayHiden':''">
			<!-- 选项栏 -->
			<view class="selectItem">
				<!-- 选择图库 -->
				<view class="picture" :class="state.selectImgId == 1 ?'pitch':''" @mousedown="setWay(1)"
					@mouseup="awayP">
					<view>图</view>
					<view>库</view>
				</view>
				<view class="bar"></view>
				<!-- 选择拍照 -->
				<view class="picture" :class="state.selectImgId == 2 ?'pitch':''" @mousedown="setWay(2)"
					@mouseup="awayP">
					<view>拍</view>
					<view>照</view>
				</view>
			</view>
			<!-- 取消栏 -->
			<view class="cancel" :class="state.selectImgId == 3 ?'pitch':''" @mousedown="setWay(3)" @mouseup="awayP">
				<view>取</view>
				<view>消</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue";
	const state = reactive({
		userInfo: {},
		itemId: 0,
		token: '',
		userImg: '',
		sexShow: false,
		sexData: [
			['男', '女']
		],
		dateShow: false,
		dateData: Number(new Date()),
		userName: '',
		userCity: '',
		userRegister: '',
		userBir: [],
		areaShow: false,
		areaArr: [
			['北京', '天津', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海', '江苏省', '浙江省', '安徽省', '福建省', '江西省',
				'山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省',
				'甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾', '香港特别行政区', '澳门特别行政区'
			],
			['北京市']
		],
		cityArr: [
			['北京市'],
			['天津市'],
			['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
			['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
			['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
			['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '盘锦市', '朝阳市',
			'葫芦岛市'],
			['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边'],
			['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市',
				'大兴安岭地区',
			],
			['上海市'],
			['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
			['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
			['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市',
				'池州市', '宣城市'
			],
			['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
			['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
			['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市',
				'聊城市', '滨州市', '菏泽市'
			],
			['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市', '许昌市', '漯河市', '三门峡市',
				'南阳市', '商丘市', '信阳市', '周口市', '驻马店市'
			],
			['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施', '仙桃市',
				'潜江市', '天门市', '神农架林区'
			],
			['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西'],
			['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市',
				'阳江市', '清远市', '东莞市', '中山市', '东沙群岛', '潮州市', '揭阳市', '云浮市'
			],
			['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市',
			'崇左市'],
			['海口市', '三亚市', '三沙市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙',
				'昌江', '乐东', '陵水', '保亭', '琼中'
			],
			['重庆市'],
			['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市',
				'达州市', '雅安市', '巴中市', '资阳市', '阿坝', '甘孜', '凉山'
			],
			['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁市', '黔西南', '毕节市', '黔东南', '黔南'],
			['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄', '红河', '文山', '西双版纳', '大理', '德宏',
				'怒江', '迪庆'
			],
			['拉萨市', '昌都地区', '山南地区', '日喀则地区', '那曲地区', '阿里地区', '林芝地区'],
			['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'],
			['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏', '甘南'],
			['西宁市', '海东市', '海北', '黄南', '海南', '果洛', '玉树', '海西'],
			['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
			['乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉', '博尔塔拉', '巴音郭楞', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区',
				'伊犁', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市'
			],
			['台北市', '高雄市', '台南市', '台中市', '金门县', '南投县', '基隆市', '新竹市', '嘉义市', '新北市', '宜兰县', '新竹县', '桃园县', '苗栗县',
				'彰化县', '嘉义县', '云林县', '屏东县', '台东县', '花莲县', '澎湖县', '连江县'
			],
			['香港岛', '九龙', '新界'],
			['澳门', '离岛']
		],
		dateId: 0,
		yearArr: [],
		monthArr: [],
		dayArr: [],
		yeadbl: 0,
		monthbl: false,
		daybl: false,
		imghiden: false,
		selectImage: true,
		selectImgId: 0
	})
	const utoast = ref(null);
	const upicker = ref(null)
	onLoad(() => {
		getInfo()
		awayP()
	})
	// 初始化年月日
	const dateup = () => {
		let date = new Date();
		let year = date.getFullYear();
		let yArr = [];
		let mArr = [];
		for (let i = year; i >= 1850; i--) {
			yArr.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			mArr.push(i);
		}
		state.yearArr = yArr;
		state.monthArr = mArr;
		state.dayArr = setDayArr(state.userBir[1]);
	}
	// 重置按钮
	const reSet = () =>{
		getInfo()
		awayP()
	}
	// 关闭年月日框
	const closeBaord = () =>{
		state.dateId = 0
	}
	// 存储获取到的个人信息
	const getInfo = (info) => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				uni.request({
					url: 'http://124.221.162.230:8888/user/getById',
					method: "POST",
					header: {
						Authorization: state.token
					},
					success: (res) => {
						// console.log(res.data.data)
						state.userInfo = res.data.data
						state.userName = state.userInfo.name;
						state.userCity = state.userInfo.city;
						state.userRegister = state.userInfo.register.toString().split(' ')[0]
						state.userBir = state.userInfo.birth.split('-');
						getuserImage()
					}
				})
			}
		})
	}
	// 获取用户头像
	const getuserImage = () => {
		uni.request({
			url: 'http://124.221.162.230:8888/user/getImage',
			method: "POST",
			header: {
				Authorization: state.token
			},
			success: (imgData) => {
				state.userImg = imgData.data.data
				dateup()
			}
		})
	}
	//修改头像
	const changeImage = () => {
		// 打开遮罩层
		state.imghiden = true
		state.selectImage = true
	}
	// 修改头像的方式
	const setWay = (id) => {
		state.selectImgId = id
		if (id == 1) {
			getimg()
		} else if (id == 2) {
			takePhone()
		} else if (id == 3) {
			state.imghiden = false
			state.selectImage = false
		}
	}
	// 拍照获取头像
	const takePhone = ()=>{
		uni.chooseImage({
			count: 1,
			sourceType: ['camera'],
			success: (e) => {
				// console.log(e.tempFiles[0])
				let tempFilePaths = e.tempFilePaths
				uni.uploadFile({
					url: 'http://124.221.162.230:8888/user/updateImage', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						Authorization: state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							getInfo()
						}
					}
				})
			}
		})
	}
	// 手指离开头像
	const awayP = () => {
		setTimeout(() => {
			state.selectImgId = 0
		}, 200)
		state.imghiden = false
		state.selectImage = false
	}
	// 上传更改头像
	const getimg = () => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: (e) => {
				// console.log(e.tempFiles[0])
				let tempFilePaths = e.tempFilePaths
				uni.uploadFile({
					url: 'http://124.221.162.230:8888/user/updateImage', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						Authorization: state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							getInfo()
						}
					}
				})
			}
		})
	}
	// 修改昵称
	const setName = () => {
		if (state.userInfo.name == state.userName) {
			return
		} else {
			state.userInfo.name = state.userName
		}
	}
	// 修改性别
	const setSex = (id) => {
		state.itemId = id;
		setTimeout(() => {
			state.itemId = 0;
			setTimeout(() => {
				state.sexShow = true
			}, 100)
		}, 100)
	}
	// 取消修改性别
	const noSex = () => {
		state.sexShow = false
	}
	// 确认修改性别
	const yesSex = (e) => {
		if (e.value[0] === '男') {
			state.userInfo.sex = 1
		} else {
			state.userInfo.sex = 0
		}
		state.sexShow = false
	}
	// 修改生日
	const setBir = (id) => {
		state.itemId = id;
		setTimeout(() => {
			state.itemId = 0;
			setTimeout(() => {
				state.dateShow = true
			}, 100)
		}, 100)
	}
	// 格式化日期
	const getDate = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		return value
	}
	// 确定生日日期
	const setDate = (e) => {
		let year = new Date(e.value).getFullYear();
		let month = parseInt(new Date(e.value).getMonth()) + 1;
		let day = new Date(e.value).getDate();
		if (month < 10) {
			month = '0' + month;
		}
		if (day < 10) {
			day = '0' + day;
		}
		let bir = year + '-' + month + '-' + day
		state.userInfo.birth = bir;
		changeInfo()
		state.dateShow = false
	}
	// 显示日期选择器
	const findSelect = (id) => {
		if (id == 3) {
			setDayArr(state.userBir[1])
		}
		state.dateId = id
	}
	// 修改年份
	const setYear = (year) => {
		state.yeadbl = year;
		setTimeout(() => {
			state.yeadbl = false
			setTimeout(() => {
				state.userBir[0] = year;
				state.dateId = 0;
				state.userInfo.birth = state.userBir.join('-');
			}, 100)
		}, 100)
	}
	// 修改月份
	const setMonth = (month) => {
		state.monthbl = month;
		setTimeout(() => {
			state.monthbl = false
			setTimeout(() => {
				state.userBir[1] = month;
				state.dateId = 0;
				state.userInfo.birth = state.userBir.join('-');
				setDayArr(month);
			}, 100)
		}, 100)
	}
	// 重置日期数组
	const setDayArr = (month) => {
		if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
			let arr = [];
			for (let i = 1; i <= 31; i++) {
				arr.push(i);
				state.dayArr = arr;
			}
		} else if (month == 4 || month == 6 || month == 9 || month == 11) {
			let arr = [];
			for (let i = 1; i <= 30; i++) {
				arr.push(i);
				state.dayArr = arr;
			}
		} else if (month == 2) {
			let arr = [];
			for (let i = 1; i <= 29; i++) {
				arr.push(i);
				state.dayArr = arr;
			}
		}
	}
	// 修改日期
	const setDay = (day) => {
		state.daybl = day;
		setTimeout(() => {
			state.daybl = day;
			setTimeout(() => {
				state.userBir[2] = day;
				state.dateId = 0;
				state.userInfo.birth = state.userBir.join('-');
			}, 100)
		}, 100)
	}
	// 取消修改生日
	const noDate = () => {
		state.dateShow = false
	}
	// 修改所在城市
	const changeCity = () => {
		state.areaShow = true
	}
	// 城市选择器改变触发
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values, // values为当前变化列的数组内容
			index,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = upicker.value
		} = e
		// 当第一列值发生变化时，变化第二列(后一列)对应的选项
		if (columnIndex === 0) {
			// picker为选择器this实例，变化第二列对应的选项
			picker.setColumnValues(1, state.cityArr[index])
		}
	}
	// 确认修改城市
	const confirm = (e) => {
		state.areaShow = false
		state.userCity = e.value[0] + '-' + e.value[1]
		state.userInfo.city = state.userCity
	}
	// 取消修改城市 
	const closearea = () => {
		const picker = upicker.value
		state.areaShow = false
		// picker.setColumnValues(0, state.areaArr[0])
		// picker.setColumnValues(1, state.cityArr[0])
	}
	// 调用修改信息接口
	const changeInfo = () => {
		let tost = utoast
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				let token = res.data;
				let userinfo = state.userInfo
				uni.request({
					url: 'http://124.221.162.230:8888/user/updateUser',
					method: 'POST',
					header: {
						Authorization: token
					},
					data: userinfo,
					success: (res) => {
						tost.value.show({
							type: 'success',
							title: '修改成功',
							message: "修改成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						// console.log(res)
					}
				})
			},
		})
	}
	// 返回用户页
	const backUser = ()=>{
		uni.switchTab({
			url:'/pages/user/user'
		})
	}
</script>

<style lang="less" scoped>
	.out-box {
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		background: #F6FBFF;
		overflow: hidden;
		position: relative;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}

		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}

		.infoCard {
			position: absolute;
			left: 0;
			top: 20%;
			width: 100%;
			height: 80%;
			padding: 130rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			box-shadow: 0rpx 0rpx 2rpx 2rpx #F6FBFF;

			.userImg {
				position: absolute;
				left: 50%;
				top: -130rpx;
				transform: translateX(-50%);
				width: 260rpx;
				height: 260rpx;
				border-radius: 50%;
				box-shadow: 0rpx 0rpx 2rpx 2rpx #F6FBFF;

				image {
					width: 260rpx;
					height: 260rpx;
					border-radius: 50%;
				}

				.changeIcon {
					position: absolute;
					right: -18rpx;
					top: 56%;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					border-radius: 50%;
					align-items: center;
					justify-content: center;
					background: linear-gradient(to right top, rgb(49, 208, 202), rgb(56, 191, 218));

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

				.changeTitle {
					white-space: nowrap;
					position: absolute;
					top: -100rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 40rpx;
					color: #011749;
					font-weight: 700;
				}

				.backbtn {
					position: absolute;
					top: -110rpx;
					left: -200rpx;
					width: 80rpx;
					height: 80rpx;
					background: #ffffff;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0rpx 0rpx 2rpx 4rpx #f5f5f5;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.detailInfo {
				.title {
					color: #001749;
					font-size: 38rpx;
				}

				.infoCard {
					width: 100%;
					padding: 0rpx 50rpx 0rpx 50rpx;
					box-sizing: border-box;

					.card {
						width: 100%;
						border: 1rpx solid #f3f5f5;
						padding: 0rpx 30rpx 30rpx 30rpx;
						box-sizing: border-box;
						border-radius: 20rpx;

						.card-item {
							margin-top: 30rpx;

							.card-item-title {
								color: #002884;
							}

							.grids {
								display: grid;
								grid-template-columns: 1fr 1.6fr;
							}

							.card-item-box {
								margin-top: 20rpx;
							}

							.gridboxs {
								display: grid;
								grid-template-columns: 1fr 1.6fr;

								.boxsex {
									color: #002884;
									padding-left: 20rpx;
									box-sizing: border-box;
									width: 150rpx;
									height: 70rpx;
									display: flex;
									justify-content: space-around;
									align-items: center;
									border-radius: 12rpx;
									background-color: #FBFBFD;
									box-shadow: 0rpx 0rpx 2rpx 2rpx #e7e6e6;

									image {
										width: 34rpx;
										height: 34rpx;
									}
								}

								.boxarea {
									color: #002884;
									padding-left: 20rpx;
									box-sizing: border-box;
									width: 380rpx;
									height: 70rpx;
									display: flex;
									justify-content: space-around;
									align-items: center;
									border-radius: 12rpx;
									background-color: #FBFBFD;
									box-shadow: 0rpx 0rpx 2rpx 2rpx #e7e6e6;

									image {
										width: 34rpx;
										height: 34rpx;
									}
								}

								.boxinput {
									color: #002884;
									padding-left: 20rpx;
									box-sizing: border-box;
									height: 70rpx;
									display: flex;
									align-items: center;
									border-radius: 12rpx;
									background-color: #FBFBFD;
									box-shadow: 0rpx 0rpx 2rpx 2rpx #e7e6e6;
								}
							}

							.boxinput {
								color: #002884;
								padding-left: 20rpx;
								box-sizing: border-box;
								height: 70rpx;
								display: flex;
								align-items: center;
								border-radius: 12rpx;
								background-color: #FBFBFD;
								box-shadow: 0rpx 0rpx 2rpx 2rpx #e7e6e6;
							}

							.boxbir {
								height: 70rpx;
								display: grid;
								grid-template-columns: 1fr 1fr 1fr;
								grid-column-gap: 16rpx;

								.datebox {
									height: 70rpx;
									border-radius: 12rpx;
									background-color: #FBFBFD;
									box-shadow: 0rpx 0rpx 2rpx 2rpx #e7e6e6;
									display: flex;
									justify-content: space-around;
									align-items: center;

									.dateboxdate {
										position: relative;

										.yearSelect {
											position: absolute;
											top: 60rpx;
											left: -20rpx;
											width: 190rpx;
											height: 250rpx;
											border-radius: 20rpx;
											border: 1rpx solid #e7e6e6;
											background-color: #FBFBFD;
											overflow: hidden;
											overflow-y: scroll;

											.yearSelectItem {
												transition: all 0.1s;
												background-color: #FBFBFD;
												width: 100%;
												height: 50rpx;
												display: flex;
												align-items: center;
												justify-content: center;
											}

											.yearBgcolor {
												transition: all 0.1s;
												background-color: #f1f1f1;
											}
										}

										.monthSelect {
											position: absolute;
											bottom: -20rpx;
											left: 0rpx;
										}

										.daySelect {
											position: absolute;
											bottom: -20rpx;
											left: 0rpx;
										}
									}

									.dateImg {
										display: flex;
										align-items: center;

										image {
											width: 34rpx;
											height: 34rpx;
										}
									}
								}
							}
						}
					}

					.submit {
						margin-top: 40rpx;
						height: 90rpx;
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-column-gap: 20rpx;

						.subone {
							display: flex;
							justify-content: center;
							align-items: center;
							color: #B0BCDA;
							background-color: #FBFBFD;
							border-radius: 50rpx;
							box-shadow: 0rpx 0rpx 2rpx 4rpx #f3f3f3;
						}

						.subtwo {
							display: flex;
							justify-content: center;
							align-items: center;
							color: #ffffff;
							background: linear-gradient(to right top, rgb(56, 191, 218), rgb(49, 208, 202));
							border-radius: 50rpx;
							box-shadow: 0rpx 0rpx 2rpx 4rpx #f3f3f3;
						}
					}
				}
			}
		}

		.imghiden {
			position: fixed;
			z-index: 3;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			background-color: rgba(201, 201, 201, 0.271);
		}

		.selectImgWay {
			transition: all 0.3s;
			position: fixed;
			z-index: 4;
			top: 100vh;
			left: 0;
			width: 100vw;
			height: 400rpx;
			padding: 0rpx 40rpx 0rpx 40rpx;
			box-sizing: border-box;

			// background-color: red;
			.selectItem {
				height: 240rpx;
				width: 100%;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 20rpx;

				.picture {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					color: black;
					font-size: 36rpx;
				}

				.bar {
					width: 100%;
					height: 0.2rpx;
					background: rgba(0, 0, 0, 0.1);
				}

				.pitch {
					transition: all 0.1s;
					background-color: rgba(255, 255, 255, 0.8);
				}
			}

			.cancel {
				margin-top: 20rpx;
				height: 120rpx;
				width: 100%;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				color: red;
				font-size: 36rpx;
			}

			.pitch {
				transition: all 0.1s;
				background-color: rgba(255, 255, 255, 0.8);
			}
		}

		.selectImgWayHiden {
			transition: all 0.3s;
			transform: translateY(-400rpx);
		}
	}
</style>
